<script setup lang="ts">
import { ref, onMounted, computed } from 'vue';
import axios from 'axios';
import { useRouter } from 'vue-router';

const router = useRouter();

const onClickLeft = () => {
    window.location.href = '/me'
}

const active = ref(1);

const dinglist = ref([])

const getding = async () => {
    let res = await axios.get('http://127.0.0.1:3000/lzl/getding')
    dinglist.value = res.data.data
}

const newlist = computed(() => {
    const newlist = ref([
        { id: 1, status: 0 },
        { id: 1, status: 1 },
        { id: 1, status: 2 },
        { id: 1, status: 3 }
    ])
    return dinglist.value.filter(item => item.status === active.value)
})



onMounted(() => {
    getding()
})


</script>
<template>
    <div id="shopstatus" style="background-color: #f4f4f4;">
        <van-nav-bar title="我的订单" left-text="" left-arrow @click-left="onClickLeft" />
        <div>
            <van-tabs v-model:active="active">
                <van-tab title="待付款">
                    <div class="shop-item" v-for="item in newlist" :key="item.id">
                        <div>
                            <span>2024-10-31</span>
                        </div>
                        <div class="item-info" style="position:relative;border-bottom: 1px solid #eee">
                            <div>
                                <img :src="item.img[0]" width="100px" height="100px" alt="">
                            </div>
                            <div style="margin-left: .5669rem;">
                                <div>{{ item.name }}</div>
                                <div style="position: absolute; bottom: .5669rem; right: .5669rem;">
                                    <span>实付款：</span><span>{{ item.price }}</span>
                                </div>
                            </div>
                        </div>
                        <div style="display: flex; margin-top: .5669rem; justify-self: end; ">
                            <button style=" padding:.2834rem; font-size: .7936rem; border:0; border-radius: 1.1337rem;
                                 color: #9fa19f;  margin-right: .5669rem;">去付款</button>
                            <button style=" padding:.2834rem; font-size: .7936rem; border:0;
                                 border-radius: 1.1337rem; background: red;color: #fff;  ">取消订单</button>
                        </div>
                    </div>
                </van-tab>
                <van-tab title="待收货">
                    <div class="shop-item" v-for="item in newlist" :key="item.id">
                        <div>
                            <span>2024-10-31</span>
                        </div>
                        <div class="item-info" style="position: relative; border-bottom: 1px solid #eee;">
                            <div>
                                <img :src="item.img[0]" height="100px" width="100px" alt="">
                            </div>

                            <div style="margin-left: .5669rem; ">
                                <div>{{ item.name }}</div>
                                <div style="position: absolute; bottom: .5669rem; right: .5669rem;">
                                    <span style="font-size: .7936rem">实付款：</span><span style="font-size: 1.1337rem">{{
                                        item.price }}</span>
                                </div>
                            </div>
                        </div>
                        <div style="display: flex;margin: .5669rem ;justify-self:right;">
                            <button style=" padding:.2834rem; font-size: .7936rem; border:0; 
                             border-radius: 1.1337rem; color: #9fa19f;  margin-right: .5669rem;">
                                待取货
                            </button>
                            <button style=" padding:.2834rem; font-size: .7936rem; border:0;
                                 border-radius: 1.1337rem; background: red;color: #fff; " @click="item.status = 2">
                                取货码
                            </button>
                        </div>
                    </div>
                </van-tab>
                <van-tab title="待评价">
                    <div class="shop-item" v-for="item in newlist" :key="item.id">
                        <div>
                            <span>2024-10-31</span>
                            <span>已送达，</span>
                        </div>
                        <div class="item-info" style="position: relative; border-bottom: 1px solid #eee;">
                            <div>
                                <img :src="item.img[0]" height="100px" width="100px" alt="">
                            </div>
                            <div style="margin-left: .5669rem;">
                                <div>{{ item.name }}</div>
                                <div style="position: absolute; bottom: .5669rem; right: .5669rem;">
                                    <span>实付款：</span><span>{{ item.price }}</span>
                                </div>
                            </div>
                        </div>
                        <div style="display: flex;margin: .5669rem ;justify-self:right;">
                            <button style=" padding:.2834rem; font-size: .7936rem; border:1px solid #9fa19f; border-radius: 1.1337rem;
                                 color: #9fa19f;  margin-right: .5669rem;" @click="item.status = 3">去评价</button>
                        </div>
                    </div>
                </van-tab>
                <van-tab title="已完成">
                    <div class="shop-item" v-for="item in newlist" :key="item.id">
                        <div>
                            <span>2024-10-31</span>
                        </div>
                        <div class="item-info" style="position: relative; border-bottom: 1px solid #eee;">
                            <div>
                                <img :src="item.img[0]" height="100px" width="100px" alt="">
                            </div>
                            <div style="margin-left: .5669rem;">
                                <div>{{ item.name }}</div>
                                <div style="position: absolute; bottom: .5669rem; right: .5669rem;">
                                    <span>实付款：</span><span>{{ item.price }}</span>
                                </div>
                            </div>
                        </div>
                        <div style="display: flex;margin: .5669rem ;justify-self:right;">
                            <button style=" padding:.2834rem; font-size: .7936rem; border:1px solid #9fa19f; border-radius: 1.1337rem;
                                 color: #9fa19f;  margin-right: .5669rem;"
                                @click="router.push(`/xiangs?id=${item._id}`)">再来一单</button>
                        </div>
                    </div>
                </van-tab>

            </van-tabs>
        </div>
    </div>
</template>



<style scoped lang="less">
.shop-item {
    margin: .5669rem;
    padding: .5669rem;
    background-color: rgb(255, 255, 255);
    border-radius: .5669rem;
    // position: relative;

    .item-info {
        display: flex;
        padding: .5669rem;
    }
}
</style>